// 选择图片
let base64Str = ''

// 获取用户信息 --- 设置头像
axios({
  method: 'get',
  url: 'http://api-breakingnews-web.itheima.net/my/userinfo',
  // `headers` 是即将被发送的自定义请求头
  headers: { 'Authorization': localStorage.getItem('token') }
}).then(res => {

  if (res.data.status === 0) {
    const data = res.data.data
    const {user_pic} = data
    // 判断 user_pic 头像
    if (user_pic) $('#image').prop('src',user_pic)
  } 

})



$('.select').on('click', function () {
  // 触发input type=file click 事件
  $('input').click()
})

// 给 input触发 change事件
$('input').on('change', function (e) {
  // 图片信息 e.target.files[0]
  console.log(e);  // change事件的事件对象
  // const file = this.files[0]
  const file = e.target.files[0] // file文件 (图片相关的信息)
  // 实时预览功能
  const url = window.URL.createObjectURL(file) //file / blob
  console.log(url);
  $('#image').prop('src', url)


  // 完成后台的接口需求 ===  base64的加密字符串
  // 声明了js文件流
  const reader = new FileReader()
  // 判断用户是否上传图片
  if (file) {
    $('.sure').attr('disabled',false)  // 上传成功,不让当前的按钮去点击了


    // 将文件 转成 base64字符串
    reader.readAsDataURL(file)
    console.log(reader.result);
    // 转化完成
    reader.onloadend = function () {
      console.log(reader.result); // base64字符串
      base64Str = reader.result // 
    }
  }
})


// 上传头像 
$('.sure').on('click',function () {
  console.log(base64Str);  // ""
  if(!base64Str) return layer.msg('请选择图片')
  // `avatar=base64格式的字符串`
  // console.log(base64Str);2
  // encodeURIComponent 针对于base64字符串 可以编码  = ; $ & 转成对应的编码%36f (后台可以识别) 
  base64Str = encodeURIComponent(base64Str)
  const data = `avatar=${base64Str}`


  axios({
    url:'http://api-breakingnews-web.itheima.net/my/update/avatar',
    headers: { 'Authorization': localStorage.getItem('token') },
    method:'post',
    data:data
  }).then(res=>{
    console.log(res);
    if(res.data.status === 0){
      window.parent.getUserInfo()
      base64Str = ''
      $('.sure').attr('disabled',true)  // 上传成功,不让当前的按钮去点击了
    }else {
      layer.msg(res.data.message)
    }
  })

})


// 两种:
// 第一种:
// base64格式的字符串
// 用作图片上传传输通用的编码格式
// 加密的(安全) 适合传输数据


// 如何转成base64字符串 ???????

// 另一种:
// new FomrData() 支持上传图片  --- 类似于 序列化 (JQ)
